<template>
  <div class="container" :data-url="albUrl">
    <!-- :style="{ backgroundImage: 'url(' + albumUrl + ')' }" -->
    <div class="album-area">
      <div class="album">
        <van-image
          width="150"
          height="150"
          :src="albUrl"
          round
          fit="contain"
          :class="[playStatus ? 'rotate-play' : 'rotate-pause', 'rotate']"
        />
      </div>
      <van-icon
        v-show="!playStatus"
        name="play-circle-o"
        class="control"
        size="40px"
        color="white"
        @click="playMusic"
      />
      <van-icon
        v-show="playStatus"
        name="pause-circle-o"
        class="control"
        size="40px"
        color="white"
        @click="playMusic"
      />
    </div>
    <div class="song-info">
      <div class="song-name">
        {{ songInfo.songName }}
      </div>
      <div class="art-name">
        {{ songInfo.artName }}
      </div>
    </div>
    <audio :src="songUrl" controls hidden id="song" />
  </div>
</template>

<script>
import { getSongUrl } from "@/server/api/HomeApi.js";
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      songUrl: "",
      //   播放状态 false没播放
      playStatus: false,
    };
  },
  computed: {
    // 相册的图片地址
    ...mapState(["songInfo"]),
    ...mapGetters(["albUrl"]),
  },
  methods: {
    // 音乐播放暂停
    playMusic() {
      let audio = document.querySelector("#song");
      if (this.playStatus) {
        audio.pause();
      } else {
        audio.play();
      }
      this.playStatus = !this.playStatus;
    },
  },
  async created() {
    console.log("参数", this.$route.query);
    let url = await getSongUrl(this.$route.query.songId);
    console.log("返回值", url);
    this.songUrl =
      url.data && url.data && url.data.data ? url.data.data[0].url : "";
    // this.songUrl = `https://music.163.com/song/media/outer/url?id=${this.$route.query.songId}`;
  },
  mounted() {
    // 设置伪元素的样式
    var style = document.createElement("style");
    style.innerHTML = `.container::after{background-image:url(${this.albUrl})}`;
    document.head.appendChild(style);
  },
};
</script>

<style scoped lang="scss">
.container {
  padding: 10px;
  height: 100%;
  background-size: cover;
  .album-area {
    margin-top: 70px;
    height: 220px;
    text-align: center;
    position: relative;
    .album {
      display: inline-block;
      width: 220px;
      height: 100%;
      background-color: #000;
      border-radius: 100%;
      position: relative;
      box-shadow: 0px 0px 10px #000;
      .van-image {
        position: relative;
        top: 16%;
      }
      @keyframes turnZ {
        0% {
          transform: rotateZ(0deg);
        }
        100% {
          transform: rotateZ(360deg);
        }
      }
      .rotate {
        // 无限旋转 25秒一圈
        animation: turnZ 25s linear infinite;
      }
      .rotate-play {
        animation-play-state: running;
      }
      .rotate-pause {
        animation-play-state: paused;
      }
    }
    .control {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

  // 歌曲信息部分
  .song-info {
    margin-top: 40px;
    padding: 0 20px;
    background-color: skyblue;
    width: 100%;
    height: 150px;
    display: flex;
  }
}
.container::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: "";
  background-position: center;
  -webkit-filter: blur(15px) brightness(10%);
  filter: blur(15px) brightness(110%);
  z-index: -1;
  opacity: 0.5;
  background-size: cover;
  // background-image: url(http://p4.music.126.net/-mS2dqpTA6wthpcGJq-Xkg==/109951164206843340.jpg);

  // content: "";
  // position: absolute;
  // top: 0;
  // left: 0;
  // width: 100%;
  // height: 100%;
  // background: transparent
  //   url(http://p4.music.126.net/-mS2dqpTA6wthpcGJq-Xkg==/109951164206843340.jpg)
  //   center center no-repeat;
  // filter: blur(15px) brightness(110%);
  // z-index: -1;
  // background-size: cover;
}
</style>
